<template>
  <div class="more-container">
    <div class="inner-content">
       <!-- 顶部搜索表单区域 -->
      <el-form
        ref="topform"
        :model="topformData"
        :rules="rules"
        size="small"
        label-width="100px"
        class="topserach"
      >
        <el-row>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="field103">
                <el-input
                  v-model="topformData.field103"
                  placeholder="学员姓名/手机号"
                  clearable
                  :style="{ width: '95%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="field105">
                <el-input
                  v-model="topformData.field105"
                  placeholder="学习班型"
                  clearable
                  :style="{ width: '95%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="team_id">
                <treeselect v-model="topformData.team_id" :options="treeOptions" :default-expand-level="1" :normalizer="normalizer"
                  placeholder="请选择关联机构" />

              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="apply_type">
                <el-select
                  v-model="topformData.apply_type"
                  placeholder="请选择申领类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in apply_typeOption"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <div class="rightbtn fr">
                <el-button type="primary" icon="el-icon-search" size="small" @click="searchlist">查询</el-button>
                <el-button icon="el-icon-refresh-left" size="small" @click="resetform">重置</el-button>
              </div>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
          <!-- 按钮区域 -->
<!--    <commonline
      :isshowImport="false"
      :isshowAdd="false"
      :importname="'成绩'"
      :importUrl='"/common/cj"'
       @searchlist='searchlist'
       @resetform='resetform'
    ></commonline> -->


    <!-- 表格 -->
    <studenttablehead :tabData='listData' @handleSizeChange='handleSizeChange' @handleCurrentChange='handleCurrentChange' v-if="issuccess">
        <el-table-column prop="achievement" label="科目一" align="center">
          <template slot-scope='scope'>
            <span>{{scope.row.achievement[0]}}
              <span v-if="scope.row.achievement[0]!=='-'">分</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="achievement" label="科目二" align="center">
          <template slot-scope='scope'>
            <span>{{scope.row.achievement[1]}}
               <span v-if="scope.row.achievement[1]!=='-'">分</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="achievement" label="科目三" align="center">
          <template slot-scope='scope'>
            <span>{{scope.row.achievement[2]}}
              <span v-if="scope.row.achievement[2]!=='-'">分</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="achievement" label="科目四" align="center">
          <template slot-scope='scope'>
            <span>{{scope.row.achievement[3]}}
              <span v-if="scope.row.achievement[3]!=='-'">分</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" align="center" >
        <template slot-scope="scope">
            <el-link type="primary" :underline='false' class="linkmar" v-if="checkPermission(['scoreInput'])" @click="entering(scope.row.name,scope.row.id,scope.row.achievement[0],scope.row.achievement[1],scope.row.achievement[2],scope.row.achievement[3])">录入</el-link>
            <el-link type="primary" :underline='false' class="linkmar" @click="record(scope.row.name,scope.row.id)">成绩记录</el-link>
        </template>
        </el-table-column>

    </studenttablehead>
    <!-- 学员成绩 -->
    <recordinfo   :dialogparams='dialogparams' :isshowDialog='isshowrecord' @closetextDialog='closetextrecord'></recordinfo>
    <!-- 录入弹窗 -->
    <enteringdialog @confirm='confirm' :dialogparams='dialogparams' :isshowDialog='isshowenter' @closetextDialog='closeenter'></enteringdialog>
    </div>
  </div>
</template>

<script>
//录入弹窗
import enteringdialog from './component/enteringdialog'
//学员表格
import studenttablehead from '@/components/studenthead'
import Treeselect from "@riophae/vue-treeselect"; //下拉树组件
//引入通用行
import commonline from '@/components/commonline/commonline'
//成绩弹窗
import recordinfo from './component/recorddialog'
//获取sessionStorage
import {getSessionStorage} from '@/utils/accessToken'
//api
import {studentList} from '@/api/student'
//按钮权限验证
import checkPermission from "@/utils/permission";
export default {
  data() {
    return {
      issuccess:false,
      //弹窗参数
      dialogparams:{},
      //列表数据
      listData:{},
      //页码
      page:1,
      //一页多少条数据
      total:10,
      //是否显示录入弹窗
      isshowenter:false,
      //是否显示学员信息弹窗
      isshowStudent:false,
      //是否显示成绩弹窗
      isshowrecord:false,
      topformData: {
        //学员姓名手机号
        field103: '',
        //学习班型
        field105: '',
        //关联校区
        team_id:null,
        //申领类型
        apply_type: '',
      },
      //表单验证
      rules: {
        field103: [],
        field105: [],
        team_id: [],
        apply_type: [],
      },
      //关联校区选项
      schoolOptions: [],
      //申领类型选项
      apply_typeOption: [],
      treeOptions: [],
    }
  },
  components: {
    commonline,
    recordinfo,
    studenttablehead,
    enteringdialog,
    Treeselect
  },
  mounted(){
    //关联校区选项
    this.schoolOptions = getSessionStorage('Optionsall')['school']
    //申领类型
    this.apply_typeOption = getSessionStorage('Options')[1]
    //获取列表数据
    this.getlistData()
      this.treeOptions = getSessionStorage('Optionsall').team
  },
  methods:{
    normalizer(node) {
      return {
        id: node.id,
        label: node.title,
        children: node.children,
      }
    },
    //权限
    checkPermission,
    //重置
    resetform(){
      this.$message.success('重置成功')
    },
    //搜索
    searchlist(){
         this.getlistData()
      this.$message.success('搜索成功')

    },
    //成绩录入成功
    confirm(){
       this.isshowenter = false
       //刷新列表
       this.getlistData()
    },
    //翻页 一页有多少条数据
    handleSizeChange(val){
        this.total = val
        //获取数据
        this.getlistData()
    },
    //翻页码
    handleCurrentChange(val){
        this.page = val
        //获取数据
        this.getlistData()
    },
    //获取成绩列表
    async getlistData(){
      let params  = {
        page:this.page,
        rows:this.total,
        type:4,
        _request:4
      }
      if (this.topformData.field103) {
        params.keyword = this.topformData.field103
      }
      if (this.topformData.field105) {
        params.subject_title = this.topformData.field105
      }
      if (this.topformData.team_id) {
        params.team_id = this.topformData.team_id
      }
      if (this.topformData.apply_type) {
        params.apply_type = this.topformData.apply_type
      }

      let data = await studentList(params)
      console.log(data)
      if(data.code=='0000'){
        this.listData = data.data
        this.issuccess = true
      }
    },
    //关闭录入弹窗
    closeenter(){
      this.isshowenter = false
    },
    //打开录入弹窗
    entering(name,id,scoreone,scoretwo,scorethree,scorefour){
      let params = {
        id:id,
        name:name,
        scoreone:scoreone,
        scoretwo:scoretwo,
        scorethree:scorethree,
        scorefour:scorefour
      }
      console.log(params)
      this.dialogparams = params
      this.isshowenter = true
    },
    //关闭成绩
    closetextrecord(){
      this.isshowrecord = false
    },
    //显示成绩记录
    record(name,id){
      let params = {
        id:id,
        name:name
      }
      this.dialogparams = params
      this.isshowrecord = true
    },
    closetextDialog(){
      //关闭弹窗
      this.isshowStudent = false
    },
    //打开弹窗
    studentopen(){
      //打开弹窗
      this.isshowStudent = true
    }
  },

}
</script>

<style scoped lang='scss'>
.topserach {
  .el-form-item{
    margin-bottom: 0px !important;
  }
}
.performancetable{
  margin-top: 25px;
}
</style>
